import React, { Component, PropTypes } from 'react'
import { Modal } from 'antd-mobile'
import moment from 'moment'
import { NavHeader } from '../common'

export default class NoticeDeatil extends Component {
  render() {
    const { visible, onClose, data } = this.props
    return (
      <Modal
        visible={visible}
        animated={false}
        closable={false}
        className={`rt-notice-detail-modal`}
      >
        <NavHeader title="公告" onClick={onClose} />

        <div className={`cm-scrollable-container`}>
          <h3>{data.Title}</h3>
          <time>{moment(data.StartDate).format('YYYY-MM-DD HH:mm:ss')}</time>
          <div className={`rt-content-box`} dangerouslySetInnerHTML={{__html: data.Content}}></div>
          <div className={`cm-main-button -grey-bg`} onClick={onClose}>确 定</div>
        </div>
      </Modal>
    )
  }
}

NoticeDeatil.propTypes = {
  visible: PropTypes.bool.isRequired,
  onClose: PropTypes.func.isRequired,
  data: PropTypes.object.isRequired,
}